<template>
  <div class="menu">
    <div class="menu-bg">
      <div class="menu-top">
        <span class="menu-back" @click="back"></span>
      </div>
    </div>
    <div class="menu-morelist">
      <van-tabs
        v-model="active"
        color="#21b276"
        title-active-color="#21b276"
        title-inactive-color="#999"
        @change="beforeChange"
        animated
      >
        <van-tab
          v-for="(item, index) in coffeeTypeData"
          :title="item.title"
          :key="index"
        >
          <van-divider
            :style="{
              color: '#999999',
              borderColor: '#000',
              padding: '0 16px',
              marginTop: '5px',
            }"
          />
          <div class="menu-list">
            <ul>
              <Hotlist
                v-for="(item, index) in menuListData"
                :key="index"
                :hotlistArr="item"
              ></Hotlist>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import "../assets/less/menu.less";
import Hotlist from "../components/Hotlist";
export default {
  name: "Menu",
  data() {
    return {
      menuListData: [],
      active: 0,
      coffeeTypeData: [
        {
          title: "咖啡",
          value: "coffee",
          status:0
        },
        {
          title: "拿铁",
          value: "latte",
          status:1
        },
        {
          title: "瑞纳冰",
          value: "rena_ice",
          status:2
        },
        {
          title: "水果茶",
          value: "fruit_tea",
          status:3
        },
      ],
    };
  },
  components: {
    Hotlist,
  },
  created() {
    this.getMenuListData(0);
  },
  methods: {
    back() {
      this.$router.back();
    },
    beforeChange(name){
      this.getMenuListData(name);
      console.log(name);
    },
    getMenuListData(value) {
      let typeValue = [
        'coffee',
        'latte',
        'rena_ice',
        'fruit_tea'
      ]
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "type",
          value:typeValue[value],
        },
      })
        .then((res) => {
          // console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == 500) {
            this.menuListData = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>